<template>
  <el-container class="home-container">
    <!-- 头部区域 -->
    <el-header>
      <div class="headerdiv">
        <img src="../../../assets/logo2.png" />
        <span>菜谱后台管理系统</span>
      </div>
      <el-button type="info" @click="loginOut">退出</el-button>
    </el-header>
    <!-- 页面主体区域 -->
    <el-container>
      <!-- 侧边栏 -->
      <el-aside :width="isCollapse ? '64px' : '200px'">
        <!--判断是否被折叠-->
        <div class="toggle-button" @click="toggleCollapse">|||</div>
        <!-- 侧边栏菜单区域 -->
        <el-menu background-color="#333744" text-color="#fff" active-text-color="#409EFF" unique-opened :collapse="isCollapse"
          :collapse-transition="false" router :default-active="activePath">
          <!-- 一级菜单 -->
          <el-submenu :index="item.navid + ''" v-for="item in menulist" :key="item.navid">
            <!-- 一级菜单的模板区域 -->
            <template slot="title">
              <!-- 图标 -->
              <i :class="iconsObj[item.navid]"></i>
              <!-- 文本 -->
              <span>{{item.navname}}</span>
            </template>

            <!-- 二级菜单 -->
            <el-menu-item :index="'/' + subItem.navurl" v-for="subItem in item.navs" :key="subItem.navid" @click="saveNavState('/' + subItem.navurl)">
              <template slot="title">
                <!-- 图标 -->
                <i class="el-icon-menu"></i>
                <!-- 文本 -->
                <span>{{subItem.navname}}</span>
              </template>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <!-- 右侧内容主体 -->
      <el-main>
        <!-- 面包屑导航区域 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>菜谱管理</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/menuList' }">菜谱列表</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/menuInfo' }">菜谱详情</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 卡片视图区域 -->
        <el-card style="padding-left:5%;">
          <!--菜谱主图-->
          <el-card id="menuCard" shadow="hover">
            <img :src="menuRow.mimg" class="image">
            <div style="padding: 30px; ">
              <span>标题：{{menuRow.mtitle}}</span>
              <div class="bottom clearfix">
                <time class="time">{{menuRow.username}}</time>
                <time class="time">
                  <el-tag type="success">{{menuRow.typename}}</el-tag>
                </time>
                <!-- 修改按钮 -->
                <el-tooltip effect="dark" content="编辑" placement="top" :enterable="false">
                  <el-button style="float: right;" size="mini" type="" @click="showMenuDialog()"><i class="el-icon-edit"></i></el-button>
                </el-tooltip>
              </div>
            </div>
          </el-card>

          <!--材料图-->
          <el-card id="msCard" shadow="hover">
            <div slot="header" class="clearfix">
              <span>{{menuRow.mtitle}}的用料</span>
              <!-- 修改按钮 -->
              <el-tooltip effect="dark" content="编辑" placement="top" :enterable="false">
                <el-button id="msbtn" size="mini" type="" @click="showMsDialog"><i class="el-icon-edit"></i></el-button>
              </el-tooltip>
            </div>
            <div v-for="item in msList" :key="item.msid" class="text item">
              {{item.mstitle }}:&nbsp;&nbsp;{{item.msnumber}}
            </div>
          </el-card>

          <!--步骤图-->
          <el-card id="msCard" shadow="hover">
            <div slot="header" class="clearfix">
              <span>{{menuRow.mtitle}}的做法</span>
              <!-- 修改按钮 -->
              <el-tooltip effect="dark" content="编辑" placement="top" :enterable="false">
                <el-button id="msbtn" size="mini" type="" @click="showStepDialog"><i class="el-icon-edit"></i></el-button>
              </el-tooltip>
            </div>
            <div v-for="item in stepList" :key="item.stepid" class="text item">
              <!-- 搜索与添加区域 栅格系统 -->
              <el-row :gutter="24">
                <el-col :span="9">
                  <img :src="item.simg" class="simage">
                </el-col>
                <el-col :span="15">
                  <div id="stepDiv">
                    <p>{{item.stitle}}</p>
                    <span>{{item.sdesc}}</span>
                  </div>
                </el-col>
              </el-row>
              <!-- <hr style="border:1px dashed #12937c" /> -->
            </div>
          </el-card>

          <!-- 修改菜谱的对话框 -->
          <el-dialog title="修改菜谱" :visible.sync="editDialogVisible" width="50%" @close="editDialogClosed">
            <el-form :model="menuform" :rules="editFormRules" ref="editFormRef" label-width="70px">
              <el-row :gutter="20">
                <!--栅格系统-->
                <!--菜谱类型-->
                <el-col :span="8">
                  <el-form-item label="菜谱类型">
                    <template>
                      <el-select v-model="menuform.mtypeid" placeholder="请选择菜谱类型">
                        <el-option v-for="item in options" :key="item.typeid" :label="item.typename" :value="item.typeid">
                        </el-option>
                      </el-select>
                    </template>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="菜谱名" prop="mtitle">
                    <el-input v-model="menuform.mtitle"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="20">
                  <el-form-item label="菜谱图片">
                    <img v-if="src==''" width="100px" height="100px" :src="menuform.mimg" alt="">
                    <el-upload style="float: right;" :auto-upload="false" :on-change="onchange" :on-remove="handleRemove"
                      :limit="1" list-type="picture-card" action="#">
                      <i class="el-icon-plus"></i>
                    </el-upload>
                    <!--图片展示-->
                    <el-dialog>
                      <img width="100%" :src="src" alt="">
                    </el-dialog>
                  </el-form-item>

                </el-col>
              </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="editDialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="editMenuInfo">确 定</el-button>
            </span>
          </el-dialog>


          <!-- 修改材料的对话框 -->
          <el-dialog title="修改材料" :visible.sync="editDialogVisible2" width="50%" @close="editDialogClosed2">
            <el-form ref="editFormRef2" label-width="70px">
              <el-form-item :inline="true" label="材料:">
                <!-- 渲染问题列表 -->
                <section v-for="(value, index) in mss" :key="index">
                  <section v-if="index === 0">
                    <el-row>
                      <el-col :span="6">
                        <el-input v-model="value.mstitle" placeholder="如:五花肉" clearable @keyup.enter.native="addms(index, '1')" />
                      </el-col>
                      <el-col class="msnum" :span="4">
                        <el-input v-model="value.msnumber" placeholder="如:250g" clearable @keyup.enter.native="addms(index, '1')" />
                      </el-col>
                      <el-col :span="4">
                        <el-button type="primary" icon="el-icon-plus" plain style="margin-left:10px;" circle @click="addms(index, '1')" />
                      </el-col>
                    </el-row>
                  </section>
                  <section v-if="index>0">
                    <!-- 添加的子项目 -->
                    <el-row style="margin-top:10px;">
                      <el-col :span="6">
                        <el-input v-model="value.mstitle" placeholder="如:五花肉" clearable @keyup.enter.native="addms(index, '1')" />
                      </el-col>
                      <el-col class="msnum" :span="4">
                        <el-input v-model="value.msnumber" placeholder="如:250g" clearable @keyup.enter.native="addms(index, '1')" />
                      </el-col>
                      <el-col :span="4">
                        <el-button type="danger" icon="el-icon-delete" plain style="margin-left:10px;" circle @click="removems(index, '1')" />
                      </el-col>
                    </el-row>
                  </section>
                </section>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="editDialogVisible2 = false">取 消</el-button>
              <el-button type="primary" @click="editMsInfo">确 定</el-button>
            </span>
          </el-dialog>


          <!-- 修改步骤的对话框 -->
          <el-dialog title="修改步骤" :visible.sync="editDialogVisible3" width="70%" @close="editDialogClosed3">
            <el-form ref="editFormRef3" label-width="70px">
              <el-form-item :inline="true" label="步骤:">
                <!-- 渲染问题列表 -->
                <section v-for="(value, index) in steps" :key="index">
                  <section v-if="index === 0">
                    <el-row>
                      <el-col :span="6">
                        <el-input v-model="value.stitle" placeholder="步骤名称:" clearable @keyup.enter.native="addstep(index, '1')" />
                        <br />
                        <el-input v-model="value.sdesc" type="textarea" :rows="5" placeholder="步骤描述:" clearable
                          @keyup.enter.native="addstep(index, '1')" />
                      </el-col>
                      <el-col @click.native="getIndex(index)" class="msnum" :span="40">
                        <img  width="100px" height="100px" :src="value.simg" alt="">
                      </el-col>
                       <el-col @click.native="getIndex(index)" class="msnum" :span="40">
                        <el-upload clearable @keyup.enter.native="addstep(index, '1')" :auto-upload="false" :on-change="onchange2"
                          :on-remove="handleRemove2" :limit="1" list-type="picture-card" action="#">
                          <i class="el-icon-plus"></i>
                        </el-upload>
                        <!--图片展示-->
                        <el-dialog>
                          <img width="100%" :src="value.sfile" alt="">
                        </el-dialog>
                      </el-col>
                      <el-col :span="4">
                        <el-button  type="primary" icon="el-icon-plus" plain style="margin-left:10px;"
                          circle @click="addstep(index, '1')" />
                      </el-col>
                    </el-row>
                  </section>
                  <section v-if="index>0">
                    <!-- 添加的子项目 -->
                    <el-row style="margin-top:10px;">
                      <el-col :span="6">
                        <el-input v-model="value.stitle" placeholder="步骤名称:" clearable @keyup.enter.native="addstep(index, '1')" />
                        <br />
                        <el-input v-model="value.sdesc" type="textarea" :rows="5" placeholder="步骤描述:" clearable
                          @keyup.enter.native="addstep(index, '1')" />
                      </el-col>
                      <el-col @click.native="getIndex(index)" class="msnum" :span="40">
                       <img width="100px" height="100px" :src="value.simg" alt="">
                      </el-col>
                      <el-col @click.native="getIndex(index)" class="msnum" :span="40">
                        <el-upload clearable @keyup.enter.native="addstep(index, '1')" :auto-upload="false" :on-change="onchange2"
                          :on-remove="handleRemove2" :limit="1" list-type="picture-card" action="#">
                          <i class="el-icon-plus"></i>
                        </el-upload>
                        <!--图片展示-->
                        <el-dialog>
                          <img width="100%" :src="value.sfile" alt="">
                        </el-dialog>
                      </el-col>
                      <el-col :span="4">
                        <el-button type="danger" icon="el-icon-delete" plain style="margin-left:10px;"
                          circle @click="removems(index, '1')" />
                      </el-col>
                    </el-row>
                  </section>
                </section>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="editDialogVisible3 = false">取 消</el-button>
              <el-button type="primary" @click="editStepInfo">确 定</el-button>
            </span>
          </el-dialog>


        </el-card>
      </el-main>
    </el-container>
  </el-container>
</template>

<script src="../js/MenuInfo.js">

</script>

<style scoped>
 @import url("../css/MenuInfo.css");
</style>
